<template>
  <div class="timebox-container">
    <span class="year-month-info">{{ yearMonth }}</span>
    <span class="text-left">{{ currentTime }}</span>
    <span class="week-info">{{ week }}</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timeInterval: null,
      currentTime: "",
      yearMonth: "",
      week: "",
    };
  },
  mounted() {
    this.initTimeClock();
  },
  destroy() {
    this.clearInterval();
  },
  methods: {
    clearInterval() {
      if (this.timeInterval) {
        clearInterval(this.timeInterval);
      }
    },
    updateClock() {
      const timeArray = this.$utils
        .parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s} 星期{a}")
        .split(" ");
      this.yearMonth = timeArray[0];
      this.currentTime = timeArray[1];
      this.week = timeArray[2];
      return this.updateClock;
    },
    initTimeClock() {
      this.clearInterval();
      this.timeInterval = setInterval(this.updateClock(), 1000);
    },
  },
};
</script>
<style lang="scss" scoped>
.timebox-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 260px;
  height: 40px;
  background: rgba(62, 62, 62, 0.45);
  box-shadow: 0px 2px 6px 0px rgba(64, 100, 197, 0.35);
  border-radius: 3px;

  font-size: 18px;

  font-weight: 500;
  color: #ffffff;

  padding: 0 10px 0 10px;
}
</style>
